<template>
   <div class="text-content"  :class="msgContent?.isSend ? 'sendText' : 'receiveText'">
        <template v-if="msgContent?.contentList?.length">
            <div v-for="(item,index) in msgContent?.contentList" :key="index" v-html="item?.content" class="text">
                
            </div>
        </template>
   </div>
</template>

<script lang="ts" setup>
    import { defineProps,watch,ref,defineExpose  } from 'vue'
    const content = ref("")
    const props = defineProps({
        // msgContent: {
        //     messageId: string
        //     messageType: string
        //     isSend: boolean
        //     msgContent: any
        //     createTime: string
        // },
        msgContent: {
            type:Object,
            default:()=>{}
        }
    })
    defineExpose({})
    // watch(() => props?.msgContent,(val, oldVal) => 
    //     {
    //         content.value = val[0] || "11111";
    //     },
    //     {
    //         deep: true,
    //         immediate: true
    //     }
    // );
    // console.log(props.msgContent,"55555")
</script>

<style scoped lang="scss">
    .text-content{
        padding: var(--crp-padding-base);
        font-size: var(--crp-font-size-base);
        line-height: 24px;
    }
    .sendText{
        white-space: pre-wrap;
        background: var(--crp-bg-color-message);
        border: 1px solid var(--crp-border-color-btn);
        border-radius: var(--crp-border-radius-base);
        .text{
            display: inline-flex;
        }
    }
    .receiveText{
        border-radius: var(--crp-border-radius-base) var(--crp-border-radius-base) 0 0;
        background: var(--crp-bg-color);
    }
</style>
